<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务委托</title>
    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
</head>
<body>
<header>
    <img src="/businessProcessManager/images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <!--<a href="/businessProcessManager/html/process.html"><el-menu-item index="1-1">流程管理</el-menu-item></a>-->
                    <a href="/businessProcessManager/html/process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                    <!--<a href="/businessProcessManager/html/sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>-->
                    <a href="/businessProcessManager/html/run-task.html"><el-menu-item index="1-3">待办任务</el-menu-item></a>
                    <a href="/businessProcessManager/html/monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <a href="/businessProcessManager/html/task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>
                    <a href="/businessProcessManager/html/model-list.html"><el-menu-item index="1-4">模型管理</el-menu-item></a>
                    <!-- <a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>

        </div>
    </div>
    <div class="main-wrapper " >
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>公文管理</a> &gt; <span class="current-position">公文会签</span></span>
        </div>
        <div class="content-wrapper" style="top: 50px;">
            <div id="tree" class="tree-wrapper">
                <el-tree
                        :data="treeDatas"
                        node-key="id"
                        ref="tree"
                        highlight-current
                        lazy
                        :expand-on-click-node="false"
                        :load="loadNode"
                        @node-click="getKey"
                        :props="defaultProps">
                </el-tree>
            </div>
            <div id="tab" class="run-detail" style="margin-left: 200px">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="单任务委托" name="first">
                        <div class="table-box">
                            <div class="form-box">
                                <el-form :inline="true" :model="taskForm" class="demo-form-inline">
                                    <el-form-item label="委托人：">
                                        <el-input v-model="taskForm.name" placeholder=""></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="center">
                                <el-table
                                        :data="taskList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            label="任务ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="processDefinitionId"
                                            label="流程名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="任务名称">
                                    </el-table-column>

                                    <el-table-column
                                            prop="createTime"
                                            label="委托时间"
                                            :formatter="dateFormat"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="owner"
                                            label="委托人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="assignee"
                                            label="办理人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            label="状态"
                                    >
                                        <template scope="scope">
                                            <span v-if="scope.row.delegationState==null">未委托</span>
                                            <span v-else>已委托</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="操作"
                                            width="120"
                                            fixed="right"
                                    >
                                        <template scope="scope">
                                            <span v-if="scope.row.delegationState==null"><el-button @click="entrustTask(scope.row)" type="text" size="small">任务委托</el-button></span>
                                            <span v-else><el-button @click="cancelEntrust(scope.row)" type="text" size="small">取消委托</el-button></span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        @current-change="handleCurrentChange"
                                        :page-size="size"
                                        layout="total, prev, pager, next"
                                        :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="全任务委托" name="second">
                        <div class="table-box">
                            <div class="tool" id="tool">
                                <el-button type="primary" @click="add">新增</el-button>
                                <el-button @click="del" size="">删除</el-button>
                            </div>
                            <div class="center" style="margin-top: 20px">
                                <el-table
                                        :data="delegationList"
                                        border
                                        @selection-change="selected">
                                    <el-table-column
                                        type="selection"
                                        width="60"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            label="ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="delegationDate"
                                            label="委托时间"
                                            :formatter="dateFormatDelegationDate"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="startDate"
                                            label="开始时间"
                                            :formatter="dateFormatStartDate">
                                    </el-table-column>

                                    <el-table-column
                                            prop="endDate"
                                            label="结束时间"
                                            :formatter="dateFormatEndDate"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="owner"
                                            label="委托人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="assignee"
                                            label="办理人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="author"
                                            label="操作人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            label="状态"
                                    >
                                        <template scope="scope">
                                            <span v-if="scope.row.status==0">未委托</span>
                                            <span v-else>已委托</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="操作"
                                            width="160"
                                            fixed="right">
                                        <template scope="scope">
                                            <span v-if="scope.row.status==0"><el-button @click="entrustTasks(scope.row)" type="text" size="small">任务委托</el-button></span>
                                            <span v-else><el-button @click="cancelEntrust(scope.row)" type="text" size="small">取消委托</el-button></span>&nbsp;&nbsp;&nbsp;
                                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        @current-change="handleCurrentChange2"
                                        :page-size="size2"
                                        layout="total, prev, pager, next"
                                        :total="total2">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="委托查询" name="third">
                        <div class="table-box">
                            <div class="form-box">
                                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                                    <el-form-item label="委托人：" :label-width="formLabelWidth">
                                    <el-input v-model="queryForm.owner" placeholder=""></el-input>
                                </el-form-item>
                                    <el-form-item label="委托方式：" :label-width="formLabelWidth">
                                        <el-radio-group v-model="queryForm.way">
                                            <el-radio label="单任务"></el-radio>
                                            <el-radio label="全委托"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="queryForm.startTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="结束时间：" :label-width="formLabelWidth">
                                        <el-date-picker
                                                v-model="queryForm.endTime"
                                                type="date"
                                                placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-button type="primary" @click="query">查询</el-button>
                                </el-form>

                            </div>
                            <div class="center" style="margin-top: 20px">
                                <el-table
                                        :data="delegationQueryList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            label="任务ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="processDefinitionId"
                                            label="流程名称"
                                    >
                                    </el-table-column>

                                    <el-table-column
                                            prop="name"
                                            label="任务名称">
                                    </el-table-column>

                                    <el-table-column
                                            prop="startTime"
                                            label="委托时间"
                                            :formatter="dateFormatQuery"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="owner"
                                            label="委托人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="assignee"
                                            label="办理人"
                                    >
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="foot-biu">
             四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>
<div id="dialog">
    <!--新增弹框-->
    <el-dialog title="新增" :visible.sync="addFormVisible">
        <el-form :model="addForm" :inline="true" class="demo-form-inline">
            <el-form-item   label="委托人：" :label-width="formLabe2Width">
                <el-input v-model="addForm.owner"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item   label="受托人：" :label-width="formLabe2Width">
                <el-input v-model="addForm.assignee" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item   label="委托时间：" :label-width="formLabe2Width">
                <el-date-picker
                        v-model="addForm.delegationDate"
                        type="date"
                        placeholder="选择日期"
                        >
                </el-date-picker>
            </el-form-item>
            <el-form-item   label="开始时间：" :label-width="formLabe2Width">
                <el-date-picker
                        v-model="addForm.startDate"
                        type="date"
                        placeholder="选择日期"
                        >
                </el-date-picker>
            </el-form-item>
            <el-form-item   label="结束时间：" :label-width="formLabe2Width">
                <el-date-picker
                        v-model="addForm.endDate"
                        type="date"
                        placeholder="选择日期"
                        >
                </el-date-picker>
            </el-form-item>
            <el-form-item   label="状态：" :label-width="formLabelWidth">
                <el-input type="textarea" autosize v-model="addForm.describe"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item   label="操作人：" :label-width="formLabe2Width">
                <el-input v-model="addForm.author"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item   label="委托事由：" :label-width="formLabelWidth">
                <el-input type="textarea" autosize v-model="addForm.comment"  auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmitForm">确 定</el-button>
        </div>
    </el-dialog>

</div>
<!-- 先引入 Vue -->
<script src="/businessProcessManager/js/ele/vue.js"></script>
<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
<script src="/businessProcessManager/js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="/businessProcessManager/js/ele/index.js"></script>
<script src="/businessProcessManager/js/jquery.min.js"></script>
<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/businessProcessManager/js/date.js"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
    function formatDates(time){
        return formatDate(new Date(time),'yyyy-MM-dd hh:mm');
    };
    function formatDatesTwo(time){
        return formatDate(new Date(time),'yyyy-MM-dd');
    };
    //多选结果
    var selectArray=new Array();
    //多选结果转换为字符串
    var selectStr=null;
//
    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });

	//单任务委托
    var tab = new Vue({
        el:'#tab',
        data:{
            activeName: 'first',
            formLabelWidth:'85px',
            taskForm:{
              name:''
            },
            queryForm:{
                owner:'',
                way:'',
                startTime:'',
                endTime:''
            },
            taskList:[],
            delegationList:[],
            delegationQueryList:[],
            total:0 ,
            currentPage: 1,
            size: 10,
            total2:0 ,
            size2: 10
        },
        created:function(){
            this.getTask();
            this.getDelegation();
        },
        methods:{
            //单任务委托分页查询
            handleCurrentChange:function(data){
                var start=(data-1)*10;
                this.$http.get(url+port+"runtime/tasks?start="+start).then(function(data){
                    tab.taskList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
            //全任务委托分页查询
            handleCurrentChange2:function(data){
                var start=(data-1)*10;
                this.$http.get(url+port+"actDelegation?start"+start).then(function(data){
                    tab.delegationList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
            //选择
            selected:function (data) {
                for(var i=0;i<data.length;i++){
                    selectArray[i]=data[i].id;
                }
                selectStr=selectArray.join("-");
            },
            //格式化委托查询中的委托时间
            dateFormatQuery:function(data,row){
                if(data.startTime!=null){
                    return formatDates(data.startTime);
                }
            },
            //格式化开始时间
            dateFormatStartDate:function(data,row){
                if(data.startDate!=null){
                    return formatDatesTwo(data.startDate);
                }
            },
            //格式化结束时间
            dateFormatEndDate:function(data,row){
                if(data.endDate!=null){
                    return formatDatesTwo(data.endDate);
                }
            },
            //格式化委托时间
            dateFormatDelegationDate:function(data,row){
                if(data.delegationDate!=null){
                    return formatDatesTwo(data.delegationDate);
                }
            },
            //格式化开始时间
            dateFormat:function(data,row){
                if(data.createTime!=null){
                    return formatDates(data.createTime);
                }
            },
            handleClick:function(tab, event) {
                console.log(tab, event);
            },
            save1:function () {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    duration:1000000,
                    message: '您有4个文件需要进行会签！'
                });
            },
            add:function () {//新增
                dialog.addFormVisible = true;
            },
            del:function () {//删除
                var that=this;
                if(selectArray.length>0){
                    this.$confirm('确认删除？', '提示', {
                        type: 'warning'
                    }).then(function () {
                        that.$http.post(url+port+"actDelegationDel",{"selectStr":selectStr},{
                            emulateJSON:true
                        }).then(function(data){
                            this.$message({
                                message: data.data,
                                type: 'warning'
                            });
                            window.location.reload();
                        },function(response){
                            console.info(response);
                            if(response){
                            }
                        })
                    }).catch(function () {
                        //取消
                    })
                }else {
                    this.$message({
                        message: '请选择需要删除的内容！',
                        type: 'warning'
                    });
                }
            },
            edit:function () {//编辑

            },
            query:function () {//查询
                this.$http.post(url+port+"query/historic-task-instances",{"taskOwner":tab.queryForm.owner,
                    "taskCreatedAfter":tab.queryForm.startTime,"taskCreatedBefore":tab.queryForm.endTime}).then(function(data){
                    tab.delegationQueryList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
            //全任务委托
            entrustTasks:function (row) {
                var that =this;
                this.$confirm('确定委托吗？','提示',{type:'warning'}).then(function () {
                    that.$http.get(url+port+"delegateTasks",{"id":row.id,"startDate":row.startDate,"endDate":row.endDate,"owner":row.owner,"assignee":row.assignee}).then(function(data){
                        this.$message({
                            message: data.data,
                            type: 'warning'
                        });
                        window.location.reload();
                    },function(response){
                        console.info(response);
                        if(response){

                        }
                    });
                }).catch(function () {

                })
            },
            //委托
            entrustTask:function (row) {
            	var that=this;
            	if(tab.taskForm.name==""){
            		this.$confirm('请选择委托人','提示',{type:'warning'});
            		return;
            	}
                this.$confirm('确定委托吗？','提示',{type:'warning'}).then(function () {
                	that.$http.post(url+port+"runtime/tasks/"+row.id,{"action":"delegate","assignee":tab.taskForm.name}).then(function(data){
                		this.$message({
                            message: data.data,
                            type: 'warning'
                        });
                		window.location.reload();
                    },function(response){
                        console.info(response);
                        if(response){

                        }
                    });
                }).catch(function () {

                })
            },
			//取消委托
            cancelEntrust:function (row) {
            	var that=this;
                this.$confirm('确定取消委托吗？','提示',{type:'warning'}).then(function () {
                	that.$http.put(url+port+"runtime/tasks/"+row.id,{"assignee":null,"delegationState":null}).then(function(data){
                		/*this.$message({
                            message: data.data,
                            type: 'warning'
                        });*/
                		window.location.reload();
                    },function(response){
                        if(response){

                        }
                    });
                }).catch(function () {

                })
            },
            //获取待办任务
            getTask:function(){
                this.$http.get(url+port+"runtime/tasks").then(function(data){
                	tab.taskList=data.data.data;
                    tab.total = data.data.total;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
          	//获取全任务委托表
            getDelegation:function(){
                this.$http.get(url+port+"actDelegation").then(function(data){
                	tab.delegationList=data.data.data;
                    tab.total2 = data.data.total;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            }
        }
    })

//    树形
var tree = new Vue({
    el: '#tree',
    data: {
        treeDatas:[],
        defaultProps: {
            label: 'NAME'
        },

    },
    methods: {
        getKey:function (data,node) {
            this.$http.get(url+port+"actProcess/"+data.ID).then(function(data){

            },function(response){
                console.info(response);
                if(response){

                }
            })
            console.log(data);
        },
        loadNode:function(node,addNode){
            var pid;
            if(node.id==0){
                pid = "-1";
            }else{
                pid = node.data.ID;
            }
            this.$http.get(url+port+"actProcess",{'pid':pid}).then(function(data){
                addNode(data.data);
            },function(response){
                console.info(response);
                if(response){

                }
            })
        }
    }
});
//    弹出框
var dialog = new Vue({
    el: '#dialog',
    data:{
        formLabelWidth: '180px',
        addFormVisible: false,
        addForm: {
        	owner: "",
        	assignee: "",
        	delegationDate: "",
        	startDate:"",
        	endDate:"",
        	comment:"",
        	author: "",
            id: ""
        },
        formLabe2Width: '180px'
    },
    methods: {
		//提交新增
        addSubmitForm:function () {
            var that =this
            this.$confirm('确认提交吗？', '提示', {
                type: 'warning'
            }).then(function () {
                console.log(dialog.addForm)
                that.$http.post(url+port+"actDelegation",dialog.addForm).then(function(data){
                		this.$message({
                            message: data.data,
                            type: 'warning'
                        });
                		window.location.reload();
                    },function(response){
                        console.info(response);
                        if(response){

                        }
                    });
                dialog.addFormVisible = false;
            })
        },
    }
});
</script>
</body>
</html>
